package myJs.cps.myTable

import myJs.cps.Style
import myJs.tool.Pojo._
import slinky.core.FunctionalComponent
import slinky.core.annotations.react
import slinky.web.html._

import scala.collection.immutable.SeqMap
import myJs.Implicits._
import myJs.cps.BootstrapTableCp.Column
import myJs.myPkg.i18n.ReactI18next

import scala.scalajs.js

/**
 * Created by yz on 21/1/2022
 */
@react object SortConditionCp {

  case class Props(fieldColumnMap: SeqMap[String, Column],
                   sortField: String, order: String, removeSort: () => Unit)

  val component = FunctionalComponent[Props] { props =>

    val js.Tuple3(t, i18n, _) = ReactI18next.useTranslation()

    object FTool {

      def removeSort = () => {
        props.removeSort()
      }

    }

    val sortField = props.sortField
    val order = props.order
    val orderE = order match {
      case "asc" => span(style := Style(color = "red"), "Ascending sort")
      case "desc" => span(style := Style(color = "blue"), "Descending sort")
      case "" => span()
    }
    if (sortField.nonBlank) {
      div(style := Style(marginBottom = "10px"), {
        s"${t("sortingConditions")}:"
      },
        span(id := "sortCondition",
          span(className := "eachFCParent",
            span(className := "eachFilterCondition", {
              span(s"${props.fieldColumnMap(sortField).title} , ")
            },
              orderE,
            ),
            sup(className := "mySup sortSub myRemoveSort", onClick := FTool.removeSort,
              i(className := "fa fa-times-circle")
            )
          )
        )
      )
    } else null

  }

}
